大家好我正在尝试制作Javascript游戏。我有一些问题 - 为什么不是我的stone.png移动,我告诉它移动javascript。 - 有人能告诉我这是不是很好的OOP编程并帮助我?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>game</title>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript" src="js/easel.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body onload="init();">
<canvas id=canvas width="960" height="580"></canvas>
</body>
</html>
使用Javascript:
var canvas;
var stage;
var score;
var bitmap;
var bmpList;
var txt;
var play;
function init() {
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
score = 0;
var image = new Image();
image.src = "imgs/stone.png";
image.onload = maakTegenstander;
}
function maakTegenstander(stone){
var image = event.target;
var container = new Container();
stage.addChild(container);
var aantal = 8;
bmpList=[];
for(var i=0; i<aantal; i++){
bitmap = new Bitmap(image);
container.addChild(bitmap);
bitmap.name="stone"+i;
resetTegenstander(bitmap);
bitmap.regX = bitmap.image.width/2|0;
bitmap.regY = bitmap.image.height/2|0;
bmpList.push(bitmap);
}
txt = new Text ("Punten: 0", "24px Arial", "#FFF");
txt.textBaseline="top";
txt.x = 800;
txt.y = 20;
stage.addChild(txt);
stage.update();
play=true;
Ticker.addListener(window);
}
function resetTegenstander(stone){
stone.x = canvas.width - Math.random()*500;
stone.y = canvas.width * Math.random()|0;
stone.speed = (Math.random()*5)+2;
}
function tijd(){
if(play == true){
var l=bmpList.length;
}
if (play == true){
var l = bmpList.length;
for(var i=0; i<l; i++){
var bmp = bmpList[i];
if (bmp.x > -200){
bmp.x -= bmp.speed;
}else{
//gameOver();
console.log("game over");
}
}
}
txt.text = "Score: "+score;
stage.update();