使用 quick.js 从 HTML 调用 JavaScript 函数
Calling JavaScript function from HTML using quick.js
我正在用Quick构建一个游戏.js
跑步游戏可以在这里玩
.HTML：
<!DOCTYPE html>
<!-- // programName: BenghaziGame.html here: http://pastebin.com/jPaFjcWk
.js here: http://pastebin.com/xLcM9G4n
Running online: http://liesandcowpies.com/quickjs/BenghaziGame.html -->
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/png" href="icon16.png" />
<script type='text/javascript' src="quick.js"></script>
<style>
#assets {
height: 1px;
overflow: hidden;
visibility: hidden;
width: 1px;
}
body {
background-color: Black;
margin: 0;
overflow: hidden;
padding: 0;
}
canvas {
cursor: none;
}
table { color: #E1E1E1;
background-color: #992D2D;
height: 24px; width: 800px;
border: none;
}
</style>
</head>
<body> <!-- html way: <body onresize="bodyResize()"> -->
<div>
<table align="center">
<tr>
<td width="10%"> totalScore </td> <td id="totalScore" width="5%"> </td>
<td width="8%"></td>
<td width="10%"> oops! </td> <td id="oopsScore" width="5%"> </td>
<td width="8%"></td>
<td width="10%"> goodHits </td> <td id="goodHits" width="5%"> </td>
<td width="8%"></td>
<td width="10%"> totalShots </td> <td id="totalShots" width="5%"> </td>
</tr>
</table>
</div>
<div align="center">
<canvas id="canvas" width="800" height="600"></canvas>
</div>
<div id="assets">
<img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" />
<img id="manufacturer" src="sprites/manufacturer.png" width="180" height="100" />
<img id="restartBtn" src="sprites/RestartButton.png" width="100" height="25" />
<img id="pauseBtn" src="sprites/PauseButton.png" width="100" height="25" />
<img id="playBtn" src="sprites/PlayButton.png" width="100" height="25" />
<img id="quitBtn" src="sprites/QuitButton.png" width="100" height="25" />
<img id="truth01Sprite" src="sprites/truth01.png" width="64" height="64" />
<img id="lies01Sprite" src="sprites/lies01.png" width="64" height="64" />
<img id="truth02Sprite" src="sprites/truth02.png" width="64" height="64" />
<img id="lies02Sprite" src="sprites/lies02.png" width="64" height="64" />
<img id="truth03Sprite" src="sprites/truth03.png" width="64" height="64" />
<img id="lies03Sprite" src="sprites/lies03.png" width="64" height="64" />
<img id="truth04Sprite" src="sprites/truth04.png" width="64" height="64" />
<img id="lies04Sprite" src="sprites/lies04.png" width="64" height="64" />
<img id="sparkSprite" src="sprites/transSpark.png" width="28" height="28" />
<img id="pointerSprite" src="sprites/handPointerT.png" width="31" height="36" />
<img id="throwerSprite" src="sprites/thrower.png" width="64" height="64" />
<img id="cowpieSprite" src="sprites/cowpie.png" width="32" height="32" />
<audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>
<audio id="battleFire" src="sounds/BattleFire.ogg"></audio>
<audio id="oops" src="sounds/oops.ogg"></audio>
<audio id="Hillary-WhatDiff" src="sounds/Splat-Hillary-WhatDiff.ogg"></audio>
<audio id="byebye" src="sounds/GoodByeFemale.ogg"></audio>
<audio id="cymbals" src="sounds/Cymbals.ogg"></audio>
<audio id="pling" src="sounds/Pling.ogg"></audio>
<audio id="pingSound" src="sounds/ping.ogg"></audio>
<audio id="pongSound" src="sounds/pong.ogg"></audio>
</div>
<!-- html way:
<script type='text/javascript'> function bodyResize() {
// alert('.html bodyResize from Html. ');
location.reload(); }
</script>
ELSE
.js way:
<script type="text/javascript" >
window.addEventListener("resize", function(){ location.reload(); } );
</script>
-->
<script type='text/javascript' src="BenghaziGame.js"></script>
</body>
</html>
.JS：
(function () {
// programName: BenghaziGame.js here: http://pastebin.com/xLcM9G4n
// .html here: http://pastebin.com/jPaFjcWk
// Quick.js here: http://pastebin.com/Gzqef5fu
/* Quick (top dog)
Point (inherits from Quick)
Rect (inherits from Point)
Sprite (inherits from Rect)
GameObject (inherits from Sprite)
Still: Where does Pointer inherit from ? ck ~paddle-main-NOW.js for score headings
*/
"use strict";
// http://www.w3schools.com/js/tryit.asp?filename=tryjs_object_function
var red = 153;
var green = 45;
var blue = 45;
var truth01Trips = 0; var truth01SVspeed ; // max trips 6 , SaVe speeds
var truth02Trips = 0; var truth02SVspeed ; // max trips 4
var truth03Trips = 0; var truth03SVspeed ; // max trips 7
var truth04Trips = 0; var truth04SVspeed ; // max trips 5
var lies01STspeed, lies02STspeed, lies03STspeed, lies04STspeed ; // STart speeds
var lies01SVspeed, lies02SVspeed, lies03SVspeed, lies04SVspeed ; // save Speeds
var allPaused = false;
var compound, manufacturer, thrower;
var truth01, truth02, truth03, truth04;
var lies01, lies02, lies03, lies04;
var totalScore = 0; var oopsScore = 0; var goodHits = 0; var totalShots = 0;
var buttonsCenter = 0;
var Cursor, cursorPoint, cursorPos;
var getXx , getYy, countLogs =1;
// var mousePos = [20,570];
var mousePos1stTimeIn = 1;
// imports
var CommandEnum = com.dgsprb.quick.CommandEnum;
var Quick = com.dgsprb.quick.Quick;
var GameObject = com.dgsprb.quick.GameObject;
var Rect = com.dgsprb.quick.Rect;
var ImageFactory = com.dgsprb.quick.ImageFactory;
var Scene = com.dgsprb.quick.Scene;
var Text = com.dgsprb.quick.Text;
var Point = com.dgsprb.quick.Point;
// static
function main() {
Quick.setAutoScale(false);
Quick.setName("Lies&Cowpies");
Quick.init(function () { return new FirstScene() });
}
var Background = (function () {
function Background() {
GameObject.call(this);
this.setColor("rgb(" + red + "," + green + "," + blue + ")");
this.setWidth(Quick.getWidth());
this.setHeight(Quick.getHeight());
};
Background.prototype = Object.create(GameObject.prototype);
return Background;
})();
var PlayBtn = (function () { // PlayBtn class namespace
function PlayBtn() { // PlayBtn class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("playBtn"); // setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of PlayBtn
// getPointer is a static method of Quick
this.setBoundary(new Rect(Quick.getCenterX() +10, 570, 100, 30)); // a method of Sprite, to set the boundaries of PlayBtn
this.setSolid();
this.setEssential(); // a method of GameObject, sets the PlayBtn object as essential to its Scene, that if this object expires, the scene will expire too.
this.setBottom(600); this.setLeft(Quick.getCenterX() +10); this.setTop(572); // this.setLeft(320);
buttonsCenter = (Quick.getCenterX() +10);
// alert('buttonsCenter = ' + buttonsCenter);
}
PlayBtn.prototype = Object.create(GameObject.prototype);
return PlayBtn; // finally publishes the class to the outer scope
})();
var RestartBtn = (function () { // RestartBtn class namespace
function RestartBtn() { // RestartBtn class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("restartBtn"); // setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of RestartBtn
this.setBoundary(new Rect(buttonsCenter -250, 570, 100, 30)); // a method of Sprite, to set this boundaries
this.setSolid();
this.setEssential();
this.setBottom(600); this.setLeft(buttonsCenter -250) ; this.setTop(572);
}
RestartBtn.prototype = Object.create(GameObject.prototype);
return RestartBtn; // finally publishes the class to the outer scope
})();
var PauseBtn = (function () { // PauseBtn class namespace
function PauseBtn() { // PauseBtn class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("pauseBtn"); // setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of PauseBtn
this.setBoundary(new Rect(buttonsCenter -125, 570, 100, 30)); // a method of Sprite, to set the boundaries of PauseBtn
this.setSolid();
this.setEssential(); // a method of GameObject, sets the PauseBtn object as essential to its Scene, that if this object expires, the scene will expire too.
this.setBottom(600); this.setLeft(buttonsCenter -125); this.setTop(572);
}
PauseBtn.prototype = Object.create(GameObject.prototype);
return PauseBtn; // finally publishes the class to the outer scope
})();
var QuitBtn = (function () { // QuitBtn class namespace
function QuitBtn() { // QuitBtn class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("quitBtn"); // setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of QuitBtn
// getPointer is a static method of Quick
this.setBoundary(new Rect(buttonsCenter +125, 570, 100, 30)); // a method of Sprite, to set the boundaries of QuitBtn
this.setSolid();
this.setEssential(); // a method of GameObject, sets the QuitBtn object as essential to its Scene, that if this object expires, the scene will expire too.
this.setBottom(600); this.setLeft(buttonsCenter + 125); this.setTop(572);
}
QuitBtn.prototype = Object.create(GameObject.prototype);
return QuitBtn; // finally publishes the class to the outer scope
})();
var Compound = (function () { // Compound class namespace
function Compound() { // Compound class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("bgCompound"); // setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of Compound
// getPointer is a static method of Quick
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight())); // a method of Sprite, to set the boundaries of Compound
this.setEssential(); // a method of GameObject, sets the Compound object as essential to its Scene, that if this object expires, the scene will expire too.
this.setBottom(Quick.getHeight() - this.getHeight());
this.setLeft(0); this.setTop(378);
}
Compound.prototype = Object.create(GameObject.prototype);
return Compound; // finally publishes the class to the outer scope
})();
var Manufacturer = (function () { // Manufacturer class namespace
function Manufacturer() { // Manufacturer class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("manufacturer"); //setImageId, a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of Manufacturer
// getPointer is a static method of Quick
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight())); // a method of Sprite, to set the boundaries of Manufacturer
this.setEssential(); // a method of GameObject, sets the Manufacturer object as essential to its Scene, that if this object expires, the scene will expire too.
this.setBottom(Quick.getHeight() - this.getHeight());
this.setLeft(618); this.setTop(468);
}
Manufacturer.prototype = Object.create(GameObject.prototype); // this says the Ball class
return Manufacturer; // finally publishes the class to the outer scope
})();
//
var Ball = (function () { // Ball class namespace
function Ball() { // Ball class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("cowpieSprite"); // setImageId,a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of Ball
// getPointer is a static method of Quick, whose public members are accessible without creating an instance of that class.
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight())); // a method of Sprite, to set the boundaries of Ball
this.setSolid(); // a method of GameObject , so Ball can collide with other solid objects - correct!
this.setBottom(Quick.getHeight() - this.getHeight());
this.setTop(500);
// this.controller = Quick.getController();
};
Ball.prototype = Object.create(GameObject.prototype); // this says the Ball class inherits from GameObject
// override - this comment means the following method overrides (rewrites) the method with the same name defined in the super class (in this case, GameObject)
Ball.prototype.onCollision = function (gameObject) { // still no instance of Ball here, just class method definition - no instance of this class is created until "new Ball()" is issued
this.expire() ; // remove ball from screne to prevent multi hits per initial colllision
var collision = this.getCollision(gameObject); // get direction at collision
if (gameObject.hasTag("truth02")) { // returns true if object contains given tag
oopsScore ++ ; totalScore = ((goodHits * 3) - (oopsScore * 2));
// alert('oopsScore = ' + oopsScore); // check for bad news multi hits
Quick.play("oops"); // calls a static method from Quick class
};
if (gameObject.hasTag("lies02")) { // returns true if object contains given tag
lies02.setLeft(0); lies02.setVisible(false); lies02.setSpeedX(0);
truth02.setVisible(true); truth02.setSpeedX(4);
goodHits ++ ; totalScore = ((goodHits * 3) - (oopsScore * 2)); // each goodHit = 3 points , each
Quick.play('Hillary-WhatDiff'); // calls a static method from Quick class
// goodHits += 1; Quick.play("cowMoo"); // calls a static method from Quick class
};
updateScores();
};
return Ball; // finally publishes the class to the outer scope
})();
function updateScores () {
document.getElementById('totalScore').innerHTML = totalScore;
document.getElementById('oopsScore').innerHTML = oopsScore;
document.getElementById('goodHits').innerHTML = goodHits;
document.getElementById('totalShots').innerHTML = totalShots;
}
window.addEventListener("resize", function(){
// Quick.setAutoScale(false);
location.reload();
} );
var Truth = (function () {
function Truth() {
GameObject.call(this);
this.setImageId("");
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight()));
// this.setEssential();
this.setSolid();
this.setLeft(0);
this.setTop(120);
this.setSpeedX(4);
};
Truth.prototype = Object.create(GameObject.prototype);
Truth.prototype.offBoundary = function (gameObject) {
if (this.hasTag("truth02")) {
truth02Trips += 1; // increment by 1
if(truth02Trips > 2) { truth02Trips = 0;
truth02.setLeft(0); truth02.setVisible(false); truth02.setSpeedX(0);
};
// Quick.play("oops"); // calls a static method from Quick class
if(truth02.getVisible() ) { this.bounceX(); // for the horizontal axis
this.setImage(ImageFactory.mirror(this.getImage())); // flip image horiz
};
if(!truth02.getVisible() ) {
lies02.setLeft(0); lies02.setVisible(true); lies02.setSpeedX(4); //
};
};
};
return Truth;
})();
//
var Lies = (function () {
function Lies() {
GameObject.call(this);
this.setImageId("");
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight()));
// this.setEssential();
this.setSolid();
this.setLeft(0);
this.setTop(120);
this.setSpeedX(5);
};
Lies.prototype = Object.create(GameObject.prototype);
Lies.prototype.offBoundary = function (gameObject) {
this.bounceX(); // for the horizontal axis
this.setImage(ImageFactory.mirror(this.getImage()));
// alert("Lies.prototype.offBoundary");
};
return Lies;
})();
//
var FirstScene = (function () {
function FirstScene() {
Scene.call(this);
this.add(new Background());
var compound = new Compound();
this.add(compound);
var playBtn = new PlayBtn();
this.add(playBtn);
playBtn.addTag("playBtn");
var restartBtn = new RestartBtn();
this.add(restartBtn);
restartBtn.addTag("restartBtn");
var pauseBtn = new PauseBtn();
this.add(pauseBtn);
pauseBtn.addTag("pauseBtn");
var quitBtn = new QuitBtn();
this.add(quitBtn);
quitBtn.addTag("quitBtn");
manufacturer = new Manufacturer();
this.add(manufacturer);
var ball = new Ball();
truth01 = new Truth();
this.add(truth01);
truth01.addTag("truth01");
truth01.setImageId("truth01Sprite");
truth01.setLeft(0);
truth01.setTop(50);
truth01.setSpeedX(4);
lies01 = new Lies();
this.add(lies01);
lies01.addTag("lies01");
lies01.setImageId("lies01Sprite");
lies01.setVisible(false);
lies01.setLeft(0) // (-64);
lies01.setTop(50);
lies01.setSpeedX(0);
truth02 = new Truth();
this.add(truth02);
truth02.addTag("truth02");
truth02.setImageId("truth02Sprite");
truth02.setLeft(0);
truth02.setTop(120);
truth02.setSpeedX(6);
lies02 = new Lies();
this.add(lies02);
lies02.addTag("lies02");
lies02.setImageId("lies02Sprite");
lies02.setVisible(false);
lies02.setLeft(0) // (-64);
lies02.setTop(120);
lies02.setSpeedX(0);
truth03 = new Truth();
this.add(truth03);
truth03.addTag("truth03");
truth03.setImageId("truth03Sprite");
truth03.setLeft(0);
truth03.setTop(190);
truth03.setSpeedX(3);
lies03 = new Lies();
this.add(lies03);
lies03.addTag("lies03");
lies03.setImageId("lies03Sprite");
lies03.setVisible(false);
lies03.setLeft(0) // (-64);
lies03.setTop(190);
lies03.setSpeedX(0);
truth04 = new Truth();
this.add(truth04);
truth04.addTag("truth04");
truth04.setImageId("truth04Sprite");
truth04.setLeft(0);
truth04.setTop(260);
truth04.setSpeedX(5);
lies04 = new Lies();
this.add(lies04);
lies04.addTag("lies04");
lies04.setImageId("lies04Sprite");
lies04.setVisible(false);
lies04.setLeft(0) // (-64);
lies04.setTop(260);
lies04.setSpeedX(0);
thrower = new Thrower();
this.add(thrower);
var cursorPoint = new Cursor();
this.add(cursorPoint);
var spark = new Spark();
this.add(spark);
alert(' Click anywhere on screen to activate buttons .');
Quick.play("battleFire"); // calls a static method from Quick class
};
FirstScene.prototype = Object.create(Scene.prototype);
// override
FirstScene.prototype.getNext = function () {
return new FirstScene();
};
return FirstScene;
})();
//
var Cursor = (function () {
function Cursor() {
GameObject.call(this);
this.addTag("pointerSprite");
this.controller = Quick.getController();
this.setBoundary(new Rect(0, 600, Quick.getWidth(), 30)); // a method of Sprite,set Boundary
this.pointer = Quick.getPointer();
this.setImageId("pointerSprite");
this.setSolid();
this.setEssential();
this.setBottom(600); this.setLeft(50); this.setTop(572);
};
Cursor.prototype = Object.create(GameObject.prototype);
Cursor.prototype.fire = function () {
var spark = new Spark(); // create a brand new spark to be thrown
var scene = this.getScene(); // ask for the scene the avatar is
scene.add(spark); // add the spark to the same scene I am
if (spark) {spark.setX(this.getX()) };
spark.setSpeedY(10);
};
Cursor.prototype.update = function () {
if (this.pointer.getPush()) { // getpush is a method of Pointer as in Mouse pointer
this.fire(); // call the Cursor.prototype.fire method we defined above
var position = this.pointer.getPosition();
};
var mousePos = this.pointer.getPosition();
this.setPosition(mousePos);
}
Cursor.prototype.offBoundary = function (gameObject) {
// alert('Cursor.prototype.offBoundary');
// this.setCenterY(587);
};
// this.setCenterY(587);
return Cursor;
})();
var Spark = (function () { // Spark class namespace
function Spark() { // Spark class constructor method
GameObject.call(this); // call the constructor from the superclass
this.setImageId("sparkSprite"); // setImageId,a method inherited from Sprite
// this.pointer = Quick.getPointer(); // pointer is a member property of Spark
this.setBoundary(new Rect(0, 600, Quick.getWidth(), 30)); // a method of Sprite,set
this.setSolid(); // a method of GameObject , so Spark can collide with other solid objects
this.setBottom(600); this.setLeft(50); this.setTop(578);
this.controller = Quick.getController();
};
Spark.prototype = Object.create(GameObject.prototype);
Spark.prototype.onCollision = function (gameObject) {
var collision = this.getCollision(gameObject); // get direction at collision
if (gameObject.hasTag("restartBtn")) { // returns true if object contains given tag
Quick.play("closeDoor"); // calls a static method from Quick class
totalScore = 0; oopsScore = 0; goodHits = 0; totalShots = 0;
updateScores();
};
if (gameObject.hasTag("pauseBtn")) { // returns true if object contains given tag
Quick.play("pling"); // calls a static method from Quick class
if(!allPaused) {
truth02SVspeed = truth02.getSpeedX(); truth02.setSpeedX(0); // this.setSpeedX(5);
lies02SVspeed = lies02.getSpeedX(); lies02.setSpeedX(0); // this.setSpeedX(5);
allPaused = true;
}
else { alert('You are already paused , try Play .');
}
};
// };
if (gameObject.hasTag("playBtn")) { // returns true if object contains given tag
Quick.play("pling"); // calls a static method from Quick class
if(allPaused) {
allPaused = false;
truth02.setSpeedX(truth02SVspeed);
lies02.setSpeedX(lies02SVspeed);
}
};
if (gameObject.hasTag("quitBtn")) { // returns true if object contains given tag
Quick.play("byebye"); // calls a static method from Quick class
window.location = 'https://github.com/dgsprb/quick/wiki';
};
};
return Spark; // finally publishes the class to the outer scope
})();
//
var Thrower = (function () {
function Thrower() {
GameObject.call(this);
this.addTag("thrower");
this.controller = Quick.getController();
this.setBoundary(new Rect(0, 0, Quick.getWidth(), Quick.getHeight()));
this.pointer = Quick.getPointer();
this.setImageId("throwerSprite");
this.setEssential();
this.setCenterX(Quick.getWidth() / 2);
this.setBottom(Quick.getHeight() - this.getHeight());
this.setTop(506);
};
Thrower.prototype = Object.create(GameObject.prototype);
Thrower.prototype.fire = function () {
var ball = new Ball(); // create a brand new ball to be thrown
var scene = this.getScene(); // ask for the scene the avatar is
scene.add(ball); // add the ball to the same scene I am
if (ball) {ball.setX(this.getX()) }; // within your Thrower update method
// totalShots ++ ;
updateScores();
// if(ball ) { this.ball.setCenterX(this.getCenterX()) } ;
ball.setSpeedY(-9);
};
Thrower.prototype.update = function () {
if (this.controller.keyDown(CommandEnum.LEFT) && this.getLeft() > 0) {
this.moveX(-8);
}
if (this.controller.keyDown(CommandEnum.RIGHT) && this.getRight() < Quick.getWidth()) {
this.moveX(8);
}
if (this.controller.keyPush(CommandEnum.UP) || this.controller.keyPush(CommandEnum.A))
{ totalShots += 1;
this.fire(); // call the method we defined above
}
}
Thrower.prototype.offBoundary = function (gameObject) {
this.setCenterX(Quick.getWidth() / 2);
};
return Thrower;
})();
main();
})();
问题：当浏览器页面从/到"最大化"到/从"向下恢复"并且比例关闭时，一切都会被放大。
所以我想重新加载页面。
我可以让htmlOnly方法工作：
<body onresize="bodyResize()">
<script type='text/javascript'> function bodyResize() {
// alert('bodyResize from Html. ');
location.reload(); }
</script>
但我真的很想在以下功能中使用：
<script type='text/javascript' src="paddle-main-WIP.js"></script>
。在第 188 行：
function bodyResize() {
alert('.js bodyResize 1.');
location.reload();
alert('.js bodyResize 2.');
}
我做错了什么？
啊哈！最后，经过更多的谷歌搜索，我从这些搜索中得到了一些答案： 触发浏览器重新加载按钮 JavaScript W3学校 捕获 URL 地址 JavaScript W3Schools window.bind 调整画布大小元素示例 W3schools -jquery -angular产生： .w3schools.com/jsref/met_loc_reload.asp .w3schools.com/jsref/event_onresize.asp请原谅缩写网址，我允许1个实际链接。
我能够以两种方式做到这一点，1）通过.html， 和 2） 通过.js ..1） .html路：36 号线和 84 号线至 88 号线。 注：.html方式36号线被注释掉。.2） .js行，第 36 行和第 90 行到第 93 行。在这里运行游戏：http://liesandcowpie...nghaziGame.html谢谢
1<!DOCTYPE html>
2<!-- // programName: BenghaziGame.html here: http://pastebin.com/jPaFjcWk
3 .js here: http://pastebin.com/xLcM9G4n
4 Running online: http://liesandcowpies.com/quickjs/BenghaziGame.html -->
5<html>
6 <head>
7 <meta charset="utf-8" />
8 <link rel="shortcut icon" type="image/png" href="icon16.png" />
9 <script type='text/javascript' src="quick.js"></script>
10 <style>
11 #assets {
12 height: 1px;
13 overflow: hidden;
14 visibility: hidden;
15 width: 1px;
16 }
17
18 body {
19 background-color: Black;
20 margin: 0;
21 overflow: hidden;
22 padding: 0;
23 }
24
25 canvas {
26 cursor: none;
27 }
28 table { color: #E1E1E1;
29 background-color: #992D2D;
30 height: 24px; width: 800px;
31 border: none;
32 }
33 </style>
34 </head>
35
36 <body> <!-- html way: <body onresize="bodyResize()"> -->
37<div>
38<table align="center">
39 <tr>
40 <td width="10%"> totalScore </td> <td id="totalScore" width="5%"> </td>
41 <td width="8%"></td>
42 <td width="10%"> oops! </td> <td id="oopsScore" width="5%"> </td>
43 <td width="8%"></td>
44 <td width="10%"> goodHits </td> <td id="goodHits" width="5%"> </td>
45 <td width="8%"></td>
46 <td width="10%"> totalShots </td> <td id="totalShots" width="5%"> </td>
47 </tr>
48 </table>
49</div>
50 <div align="center">
51 <canvas id="canvas" width="800" height="600"></canvas>
52 </div>
53
54 <div id="assets">
55 <img id="bgCompound" src="sprites/bgCompound.png" width="320" height="191" />
56 <img id="manufacturer" src="sprites/manufacturer.png" width="180" height="100" />
57 <img id="restartBtn" src="sprites/RestartButton.png" width="100" height="25" />
58 <img id="pauseBtn" src="sprites/PauseButton.png" width="100" height="25" />
59 <img id="playBtn" src="sprites/PlayButton.png" width="100" height="25" />
60 <img id="quitBtn" src="sprites/QuitButton.png" width="100" height="25" />
61 <img id="truth01Sprite" src="sprites/truth01.png" width="64" height="64" />
62 <img id="lies01Sprite" src="sprites/lies01.png" width="64" height="64" />
63 <img id="truth02Sprite" src="sprites/truth02.png" width="64" height="64" />
64 <img id="lies02Sprite" src="sprites/lies02.png" width="64" height="64" />
65 <img id="truth03Sprite" src="sprites/truth03.png" width="64" height="64" />
66 <img id="lies03Sprite" src="sprites/lies03.png" width="64" height="64" />
67 <img id="truth04Sprite" src="sprites/truth04.png" width="64" height="64" />
68 <img id="lies04Sprite" src="sprites/lies04.png" width="64" height="64" />
69 <img id="sparkSprite" src="sprites/transSpark.png" width="28" height="28" />
70 <img id="pointerSprite" src="sprites/handPointerT.png" width="31" height="36" />
71 <img id="throwerSprite" src="sprites/thrower.png" width="64" height="64" />
72 <img id="cowpieSprite" src="sprites/cowpie.png" width="32" height="32" />
73
74 <audio id="closeDoor" src="sounds/CloseDoor.ogg"></audio>
75 <audio id="battleFire" src="sounds/BattleFire.ogg"></audio>
76 <audio id="oops" src="sounds/oops.ogg"></audio>
77 <audio id="Hillary-WhatDiff" src="sounds/Splat-Hillary-WhatDiff.ogg"></audio>
78 <audio id="byebye" src="sounds/GoodByeFemale.ogg"></audio>
79 <audio id="cymbals" src="sounds/Cymbals.ogg"></audio>
80 <audio id="pling" src="sounds/Pling.ogg"></audio>
81 <audio id="pingSound" src="sounds/ping.ogg"></audio>
82 <audio id="pongSound" src="sounds/pong.ogg"></audio>
83 </div>
84<!-- html way:
85 <script type='text/javascript'> function bodyResize() {
86 // alert('.html bodyResize from Html. ');
87 location.reload(); }
88 </script>
89 ELSE
90 .js way:
91<script type="text/javascript" >
92window.addEventListener("resize", function(){ location.reload(); } );
93</script>
94-->
95 <script type='text/javascript' src="BenghaziGame.js"></script>
96
97
98 </body>
99</html>
100如果你从代码中注释掉/删除这一行怎么办：
Quick.setAutoScale(false);
让 Quick 为您进行自动缩放？如果必须，您也可以致电：
Quick.setKeepAspect(true);
使其保持游戏方面而不是拉伸。
参考：快速 API
谢谢迪奥戈，
我想你指的是我在这里的其他帖子：stackoverflow.com/questions/36105157/how-to-trigger-quick-setautoscalefalse-multitimes-with-quick-js
但我会在这里回答（并在下面也发布内容）。
"@DiogoSchneider：就让Quick帮你做自动缩放吧？"我最初尝试过，但将图标放大到 78x78 .这就是导致我选择Quick.setAutoScale（false）的原因。
正常屏幕画布应为 800x600 。
同时仍然保持'window.addEventListener（"resize"， function（）{' in PLAY：如果我跑
Quick.setAutoScale（false）; Quick.setKeepAspect（true）;屏幕被放大（canvas = ？x？，无法判断，因为当我切换到调试屏幕时，它会改变一切）图标是 132x78 ，用于"向下还原"和"最大化"。
当我跑步时 函数 main（） { Quick.setAutoScale（false）; Quick.setKeepAspect（true）; Quick.setName（"Lies&Cowpies"）; Quick.init（function （） { return new FirstScene（） }）;
一切都很好，"恢复"和"最大化"画布= 800x600，图标= 64x64。除此之外，由于"重新加载"，我丢失了所有分数等。
如果我使用"window.addEventListener（"resize"， function（）{' 不在播放中运行，并且 函数 main（） { Quick.setAutoScale（false）; Quick.setKeepAspect（true）; Quick.setName（"Lies&Cowpies"）; Quick.init（function （） { return new FirstScene（） }）;
在"向下还原"模式下，屏幕是正常的画布= 800x600，图标= 64x64。在"最大化"模式下，屏幕被放大（画布 = 956x~713），图标为 78x78。
结果：我仍然需要"window.addEventListener（"resize"，function（）'来正确重置内容。
万不得已 ，我也试过 window.addEventListener（"resize"， function（）{ location.reload（）; Quick.setAutoScale（false）; Quick.setKeepAspect（true）; } );
"向下恢复"画布 = 830x~633，图标 = 64x64。"最大化"画布 = 955x724 图标 = 78x78
结果：我仍然需要"window.addEventListener（"resize"，function（）'来正确重置内容。
相关文章：
- 我需要从php调用javascript或jquery
- 如何在webView，Android中从@JavascriptInterface方法调用Javascript
- 使用html表单中的参数调用JavaScript函数
- 可以´t调用JavaScript中的函数
- 在按钮上调用Javascript函数
- 如何从Objective-C代码中调用javascript代码
- 当库在页脚中加载时，基于PHP条件调用Javascript
- 可以't在Jasmine中调用Javascript函数
- 在page_load事件上调用javascript函数
- 如何在ajax中调用javascript对象的方法
- 如何使用WPF调用JavaScript对象的函数
- 我们可以用参数对象集合而不是原始数据来调用JavaScript collection.reduce(）方法吗
- 在新的浏览器选项卡上加载新的aspx页面后调用JavaScript函数
- 从附加文本调用javascript(订单车）
- 在线程循环中调用JavaScript
- 在指定时间后多次调用Javascript中的函数
- 未调用Javascript onscroll事件
- 如何正确调用Javascript中的匿名函数
- 从字符串调用javascript函数
- 无法从活动调用 javascript 函数
