JavaScript新手学习——飞机大战，从飞机大战开始的javascript新手教程

最新推荐文章于 2024-04-15 08:57:36 发布

无焉

最新推荐文章于 2024-04-15 08:57:36 发布

阅读量584

点赞数 1

分类专栏： java 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_43956221/article/details/119450758

版权

最近去看了看JavaScript，语法啥的比较简单，加上能页面显示，那写个小游戏就无可厚非了。
js新手，第一次写，主要还是学习吧。
首先写个简单的页面文件

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="game.js"></script>
    <link rel="stylesheet"  href="./css/game.css" />
    <meta charset="UTF-8">
    <title>game</title>
</head>
<body>
    <canvas id="canvas" >
    </canvas>
    <button onclick="begin()">begin</button><br>
</div>
</body>
</html>

写个css：

#canvas {
   
    width: 800px;
    height: 800px;
    position: relative;
    background: yellow;
}

开始主要的game.js
首先是获取画布，然后写个刷新画布的函数，包括一个分数和生命的显示函数
js中虽有数据类型，但变量一律用var来声明（不写也行），且均为全局（哪怕在函数中声明），想要单独的局部变量（比如for里的i），可以用let声明）
函数使用function声明

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var reflshflag=0;
function refresh(){
   
    //刷新屏幕
    if(reflshflag>4){
   
        canvas.height=canvas.height;
        reflshflag=0;
        paintText();
    }else{
   reflshflag++}
}
function paintText(){
   
    context.font = "bold 10px 微软雅黑";
    context.fillText("SCORE:" + score,20,20);
    context.fillText("LIFE:" + hero.life,20,130);
    context.fillText("BIGBONG:" + hero.bigbongtime,20,140);
}

js中存在一个叫“变量提升”的机制，在启动时会把所有声明提升到最前，所以哪怕在后面声明的函数与变量，也可以在前面被引用（与c、java等不同）

var speed=2;
var MaxEnemy=30;
var nowEnemy=0;
var state=1;//用于切换游戏状态
var EnemyWhite={
   EnemyLevel:5,speed:1,life:5,color:"White"};
var EnemyGreen={
   EnemyLevel:

最低0.47元/天解锁文章

无焉

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript新手学习——飞机大战，从飞机大战开始的javascript新手教程

最近去看了看JavaScript，语法啥的比较简单，加上能页面显示，那写个小游戏就无可厚非了。js新手，第一次写，主要还是学习吧。首先写个简单的页面文件<!DOCTYPE html><html lang="en"><head> <script src="game.js"></script> <link rel="stylesheet" href="./css/game.css" /> <meta
复制链接

扫一扫