一直想自己写一个游戏玩，时间和精力都不太允许，最近几天刚好有空闲时间，就琢磨了这个小游戏。
刚开始想着计算图片重叠事件,然后让炮弹和飞机消失,傻乎乎写了一天,越整越乱.今天一大早晕过来了，改用数组以后全部实现也就花了一个小时，有时候正确的方向真的比努力重要的多
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>射击游戏</title> <link type="text/css" rel="stylesheet" href="css.css"> <script type="text/javascript" src="control.js" charset="gbk"></script> </head> <body> <div id="body"> <div id="title"> <span id="sp">射击游戏</span> </div> <div id="area"> <div id="game_area"> </div> <div id="Down_1"> <img id="tank" src="tank.png"> </div> </div> <div id="right_1"> <h3>游戏说明:</h3><br> <p>1、暂停以后点开始游戏继续</p><br> <p>2、 暂不支持修改控制按键</p><br> <p>3、 点新游戏刷新页面,重新开始游戏</p><br> <p>4、 电脑情况不同可能出现卡顿</p><br> </div> <div id="right"> <div id="score">得分 :<br><span id="sp1">0</span><br>分 </div> <table> <tr> <td><input id="new" class="key" value="开始游戏" type="button" onclick="start()"></td> </tr> <tr> <td><input id="new" class="key" value="新游戏" type="button" onclick="newGame()"></td> </tr> <tr> <td><input id="stop" class="key" value="暂停" type="button" onclick="stop();"></td> </tr> <tr> <td>左：←<input id="key_left" value="←" class="key" maxlength="1" onblur="setLeft()" type="text"></td> </tr> <tr> <td>右：→<input id="key_right" value="→" class="key" maxlength="1" onblur="setRight()" type="text"></td> </tr> <tr> <td>发射：<input id="key_shot" value="x" class="key" maxlength="1" onblur="setShot()" type="text"></td> </tr> </table> </div> </div> </body> </html>
JS代码如下，最上面的二维数组写出了是为了思路清晰一点，把这个看成屏幕思路更清晰一点
var in_area=[
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];
window.onload=function(){
setInterval(color,200);
}
var fz_speed = 2000;//下落速度
function start(){//开始
clock_1 = setInterval(refresh,10);
clock_2 = setInterval(shot_move,10);//发射子弹速度
redom_fz;//产生一行飞机
clock_4 = setInterval(fz_move,1000);//飞机下落,
}
function stop(){//暂停
clearInterval(clock_1);
clearInterval(clock_2);
clearInterval(clock_3);
clearInterval(clock_4);
}
function newGame(){//重新开始,刷新页面,初始化页面为0
window.location.reload();
for(var i = 0;i<20;i++){
for(var j=0;j<20;j++){
in_area[i][j]=0;
}
}
}
function refresh(){
var line = document.getElementById("game_area");
line.innerHTML="";
for(var i = 0;i<20;i++){
for(var j=0;j<20;j++){
var img = line.appendChild(document.createElement("img"));
//in_area[i][j]=Math.floor(Math.random()*3);
if(in_area[i][j]==1){ //1 = 飞机
img.setAttribute("class","fz");
img.setAttribute("src","feiji.png");
}else if(in_area[i][j]==2){ //2 = 子弹
img.setAttribute("class","zd");
img.setAttribute("src","ziDan.png")
}else{ //0 = 消失
line.removeChild(img)
var img = line.appendChild(document.createElement("div"));
img.setAttribute("class","black");
}
}
}
}
//左右和射击,左37,右39,空格32,x键88
var left=37;
var right=39;
var shot = 88 ;
onkeydown=function(){
var e= event;
if(e.keyCode==left){
move_left();
}
if(e.keyCode==right){
move_right();
}
if(e.keyCode==shot){
new_shot();
}
}
//左移
function move_left(){
var tank = $("tank");
var left = getDefaultStyle(tank,'left');
if(left>0){
left = left-30;
tank.style.left=left+"px";
}
}
//右移
function move_right(){
var tank = $("tank");
var left = getDefaultStyle(tank,'left');
if(left<560){
left = left+30;
tank.style.left=left+"px";
}
}
//射击(坦克左右移动范围left:-10px~560px,加上10再除以30得到0~19列)
function new_shot(){
var tank = $("tank");
var left = (getDefaultStyle(tank,'left')+10)/30;
in_area[19][left]=2;
}
//子弹移动 子弹 = 2,从第二行开始遍历
function shot_move(){
for(var i = 1;i<20;i++){
for(var j=0;j<20;j++){
if(in_area[i][j]==2){
in_area[i-1][j]+=in_area[i][j];
in_area[i][j]=0;
if(in_area[i-1][j]==3){
in_area[i-1][j]=0;
addScore();
}
if(i==0){
in_area[i][j]=0;
}
}
}
}
}
//产生飞机0~1,出现飞机的频率,数字越大飞机越多
var level = 0.1;
function redom_fz(){
for(var j=0;j<20;j++){
if(Math.random()<level){
in_area[0][j]=1;
}
}
}
//飞机下落 飞机=1,从第一行开始遍历
function fz_move(){
for(var i = 19;i!=-1;i--){
for(var j=0;j<20;j++){
if(i-1>=0){
if(in_area[i-1][j]==1){
in_area[i][j]+=in_area[i-1][j];
in_area[i-1][j]=0;
if(in_area[i][j]==3){
in_area[i][j]=0;
addScore();
}
if(i>=19){
alert("Game Over!!!");
window.location.reload();
}
}
}
}
}
redom_fz() //产生一行飞机,在最上方
}
//设置分数
var score = 0;
function addScore(){
score++;
var s=$("sp1");
b = b+Math.floor(Math.random()*50);
y = y+Math.floor(Math.random()*50);
r = r+Math.floor(Math.random()*50);
if(b>255){
b = 0;
}
if(y>255){
y = 0;
}
if(r>255){
r = 0;
}
s.style.color="rgb("+b+","+y+","+r+")";
s.innerHTML=score;
}
//设置三原色
var b = 0;
var y = 0;
var r = 0;
var color = function(){
b = b+Math.floor(Math.random()*50);
y = y+Math.floor(Math.random()*50);
r = r+Math.floor(Math.random()*50);
if(b>255){
b = 0;
}
if(y>255){
y = 0;
}
if(r>255){
r = 0;
}
var p = document.getElementById("sp");
p.style.color="rgb("+b+","+y+","+r+")";
}
function $(id){
return document.getElementById(id);
}
function getDefaultStyle(obj,attribute){
return parseInt(window.getComputedStyle(obj, null)[attribute]);
}
CSS代码
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
}
#body{
margin: auto;
margin-top:50px;
width: 1000px;
height: 700px;
border: solid 5px rgb(241,241,241);
background:rgb(255,255,225);
}
#score{
font-size: 0.8cm;
}
#game_area{
width: 600px;
height: 600px;
float: left;
}
#Down_1{
width: 600px;
height: 50px;
background-color: rgb(225,225,200);
float: left;
}
#tank{
height:50px;
width:50px;
background-color: black;
position: relative;
left:290px;
top:2px;
}
#sp1{
color: rgb(0,225,225);
font-size: 1.2cm;
}
#right{
width: 180px;
height: 600px;
float: right;
border: solid 2px rgb(225,225,225);
}
#right_1{
width: 180px;
height: 600px;
float: right;
border: solid 2px rgb(225,225,225);
}
tr{
height: 1.5cm;
}
#title{
width: 400px;
height: 50px;
position: relative;
left:40%;
}
#new,#stop{
position: relative;
left:30%;
}
.key{
width: 2cm;
height: 0.8cm;
;
}
#sp{
font-size: 1cm;
font-style: oblique;
}
#area{
width: 600px;
height: 650px;
border: solid 1px rgb(0,115,0);
float: left;
}
.fz{
width:30px;
height:30px;
position:relative;
float: left;
}
.zd{
width:30px;
height:30px;
position:relative;
float: left;
}
.black{
width:30px;
height:30px;
position:relative;
float: left;
}
图片素材:
feiji.png
tank.png
ziDan.png
