基于html5的单机游戏Word格式.docx
- 文档编号:16591161
- 上传时间:2022-11-24
- 格式:DOCX
- 页数:27
- 大小:21.04KB
基于html5的单机游戏Word格式.docx
《基于html5的单机游戏Word格式.docx》由会员分享,可在线阅读,更多相关《基于html5的单机游戏Word格式.docx(27页珍藏版)》请在冰豆网上搜索。
"
<
canvasid="
canvasOne"
width="
650"
height="
384"
top=50px;
left=50px;
YourbrowserdoesnotsupporttheHTML5Canvas.<
/canvas>
/div>
/body>
/html>
Main.js
window.addEventListener("
load"
canvasApp,false);
//是否支持canvas
functioncanvasSupport(){
returnModernizr.canvas;
}
functioncanvasApp(){
//是否支持canvas
if(!
canvasSupport()){
return;
}
vartheCanvas=document.getElementById("
);
varcontext=theCanvas.getContext("
2d"
vartank=newImage();
tank.addEventListener('
load'
start,false);
tank.src="
tanks_sheet.png"
//Background
context.fillStyle="
#CCCCCC"
;
context.fillRect(0,0,theCanvas.width,theCanvas.height);
//Box
context.lineWidth=16;
context.strokeStyle="
#000000"
context.strokeRect(8,8,theCanvas.width-16,theCanvas.height-16);
//画我方tank和我方炮弹
functiondrawtank(){
if(gameover){
context.save();
context.fillStyle="
context.font="
normalbold50pxnormal"
context.fillText("
游戏结束"
150,150);
context.restore();
normalbold25pxnormal"
按空格键重新开始游戏"
125,200);
update();
}
update();
drawScene();
render();
//画场景
functiondrawScene(){
for(vari=0;
i<
=10;
i++){
for(varj=0;
j<
=14;
j++){
colCtr=j*32+16;
rowCtr=i*32+16;
context.save();
sourceX=Math.floor(scene[i][j]%8)*32;
sourceY=Math.floor(scene[i][j]/8)*32;
context.drawImage(tank,sourceX,sourceY,32,32,colCtr,rowCtr,32,32);
context.restore();
}
}
//坦克更新数据
functionupdate(){
tankmove.x=tankmove.nextx;
tankmove.y=tankmove.nexty;
//左
if(keyPressList[37]==true){
//playermove.play();
//playermove.stop();
if(gameover){
return;
space();
tankmove.tankAngle=270;
tankmove.nextx-=tankmove.tankspeed;
tankmove.tankshape=tankmove.tanknextshape;
if(scene[Math.floor((tankmove.nexty-12)/32)][Math.floor((tankmove.nextx-12)/32)]!
=0||scene[Math.ceil((tankmove.nexty-20)/32)][Math.floor((tankmove.nextx-12)/32)]!
=0){
tankmove.nextx=tankmove.x;
tankmove.nexty=tankmove.y;
tankmove.tanknextshape+=1;
if(tankmove.tanknextshape>
8){
tankmove.tanknextshape=1;
return;
//右
if(keyPressList[39]==true){
tankmove.tankAngle=90;
tankmove.nextx+=tankmove.tankspeed;
if(scene[Math.ceil((tankmove.nexty-20)/32)][Math.ceil((tankmove.nextx-20)/32)]!
=0||scene[Math.floor((tankmove.nexty-12)/32)][Math.ceil((tankmove.nextx-20)/32)]!
//上
if(keyPressList[38]==true){
tankmove.tankAngle=0;
tankmove.nexty-=tankmove.tankspeed;
//下
if(keyPressList[40]==true){
tankmove.tankAngle=180;
tankmove.nexty+=tankmove.tankspeed;
space()
//空格,发射炮弹
functionspace(){
if(keyPressList[32]==true){
if(gameover){
location.reload();
}
if(shell.shellflage){
return;
if(tankmove.nextx<
0){
else{
shootSound.play();
shell.shellflage=true;
shell.nextx=tankmove.nextx;
shell.nexty=tankmove.nexty;
shell.shellAngle=tankmove.tankAngle;
if(shellInterval){
clearInterval(shellInterval);
shellInterval=null;
}
shellInterval=setInterval(drawshell,33);
//坦克实施
functionrender(){
context.setTransform(1,0,0,1,0,0)
varangleInRadians=tankmove.tankAngle*Math.PI/180;
context.translate(tankmove.x+16,tankmove.y+16)
context.rotate(angleInRadians);
vartankshapeX=Math.floor(tankmove.tankshape%8)*32;
vartankshapeY=Math.floor(tankmove.tankshape/8)*32;
context.drawImage(tank,tankshapeX,tankshapeY,32,32,-16,-16,32,32);
context.clearRect(496,16,138,352);
#3cb371"
context.fillRect(496,16,138,352);
italicbold23pxserif"
关卡:
+level+"
500,80);
敌人:
+surplus+"
500,110);
生命:
+life+"
500,140);
得分:
+score+"
500,170);
最高分:
+record+"
500,200);
normalbold15pxnormal"
游戏说明:
玩家"
500,270);
操控坦克进行战"
500,290);
斗,击毁敌方得"
500,310);
分,被击毁或相"
500,330);
相撞减分。
500,350);
//画炮弹
functiondrawshell(){
if(gameover){
shellupdate()
shellrender()
//炮弹发射数据更新
functionshellupdate(){
if(shell.shellAngle==0){
shell.nexty-=shell.shellspeed;
vari=scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)];
scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
if(shell.shellAngle==90){
shell.nextx+=shell.shellspeed;
vari=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)];
scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)]=hitwall(i);
if(shell.shellAngle==180){
shell.nexty+=shell.shellspeed;
vari=scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)];
scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
if(shell.shellAngle==270){
shell.nextx-=shell.shellspeed;
vari=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)];
scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)]=hitwall(i);
//检测炮弹是否撞墙
functionhitwall(i){
switch(i){
case26:
if(shellInterval){
clearInterval(shellInterval);
shellInterval=null;
}
setTimeout(function(){shell.shellflage=false},300);
shell.nextx=-500;
shell.nexty=-500;
return0;
break
case31:
returni;
case30:
default:
}
//炮弹发射实施
functionshellrender(){
shell.x=shell.nextx;
shell.y=shell.nexty;
context.save();
context.setTransform(1,0,0,1,0,0)
varshellangleInRadians=shell.shellAngle*Math.PI/180;
context.translate(shell.x+16,shell.y+16)
context.rotate(shellangleInRadians);
varshellshapeX=Math.floor(shell.shellshape%8)*32;
varshellshapeY=Math.floor(shell.shellshape/8)*32;
context.drawImage(tank,shellshapeX,shellshapeY,32,32,-16,-16,32,32);
context.restore();
}
}
//画敌军坦克
functiondrawenemy(){
for(varenemytanknum=0;
enemytanknum<
=2;
enemytanknum++){
varenemytank=enemy[enemytanknum];
//enemyrmove.play();
enemyupdate();
enemyrender();
functionenemyupdate(){
enemytank.shapenum=(0.1+enemytank.shapenum)%8+9;
//减慢滚带的速度
enemytank.enemytankshape=Math.floor(enemytank.shapenum);
if(enemytank.enemytankAngle==180){
swerve()
enemytank.nexty+=enemytank.enemytankspeed;
if(scene[Math.ceil((enemytank.nexty-20)/32)][Math.ceil((enemytank.nextx-20)/32)]!
=0||scene[Math.ceil((enemytank.nexty-20)/32)][Math.floor((enemytank.nextx-12)/32)]!
enemyhitwall()
if(enemytank.enemytankAngle==270){
enemytank.nextx-=enemytank.enemytankspeed;
if(scene[Math.floor((enemytank.nexty-12)/32)][Math.floor((enemytank.nextx-12)/32)]!
if(enemytank.enemytankAngle=
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 html5 单机 游戏