javascript 初学教程及五子棋小程序的简单实现


Posted in Javascript onJuly 04, 2017

一.JavaScript简介

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

二.hbulider工具的使用

1)

hbulider的特点:

1.飞快的编码速度

2.HBuilder直接创建移动App,打包为ios或Android原生安装包

3.HTML5语法、HTML5+语法、三大浏览器扩展语法,尽收HBuilder中

4.绿柔设置界面,更加护眼

2)

下载hbulider安装包

百度搜索hbulider,进入官方网站,点击右上角 download 按钮,即可下载。

javascript 初学教程及五子棋小程序的简单实现

4)

下载完成后可以看到下载到的是一个压缩包,打开下载的压缩包,将压缩包内的文件解压到希望存放的位置,点击确定。

javascript 初学教程及五子棋小程序的简单实现

5)

解压完成后,找到解压位置,点击hbulider.exe文件,开始安装。

javascript 初学教程及五子棋小程序的简单实现

6)打开后选择一个一般用来存放代码的文件夹作为代码目录。

javascript 初学教程及五子棋小程序的简单实现

7)根据自己的实际情况,选择所能看清楚的颜色块,然后点击下方 生成适合你的视觉方案 生成一个舒适的配色。

javascript 初学教程及五子棋小程序的简单实现

8)选择喜欢的视觉主题,点击下面的 确认并关闭 ,完成设置。

javascript 初学教程及五子棋小程序的简单实现

9)完成后进入到欢迎向导,如图,到此安装完成。

javascript 初学教程及五子棋小程序的简单实现

三.用hbulider写一个五子棋小程序

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>五子棋游戏</title>
  </head>
  <body>
    <canvas id="myCanvas" width="570" height="570" 
      style="border: 2px solid #abcabc"></canvas>
  
  <!--
    作者:offline
    时间:2017-07-03
    描述:使用js代码控制游戏逻辑
  -->
    <script type="text/javascript">
      //获取canvas的标签
      var ChessCanvas = document.getElementById("myCanvas");
      //获取画布
      var gameCanvas = ChessCanvas.getContext("2d");
      //定义棋盘大小
      var map = 25;
      //棋子大小
      var chessSize = 24;
       //获取下棋的坐标
       var x = y = 0;
      //棋子的颜色
      var isRed = true;//==true的该下红棋 否则下黑棋
      var color = "#000000";
      //棋子数组  二维数组
      //保存所下的棋子 0:未下;1:下红棋;2:下黑棋
      var chessData = new Array(23);
      for(var i=0;i<23;i++)
      {
        chessData[i] =new Array(23);
        for(var j=0;j<23;j++)
        {
          chessData[i][j] = 0;
        }
      }
      //所下棋子在棋子数组的位置
      var i,j;
      //绘制棋盘
      for(var i=0;i<23;i++)
      {
        gameCanvas.moveTo(10,10+i*map);
        gameCanvas.lineTo(560,10+i*map);
        gameCanvas.moveTo(10+i*map,10);
        gameCanvas.lineTo(10+i*map,560);
        gameCanvas.stroke();//画
      }
      //创建函数,完成下棋
      function addChess(x,y)
      {
        //下棋 画小圆圈   角度转弧度 π/180×角度    弧度变角度 180/π×弧度
        gameCanvas.beginPath();//开始
        gameCanvas.arc(x,y,12,0,Math.PI*2,true);//画棋子
        gameCanvas.fillStyle = color;
        gameCanvas.fill();
        gameCanvas.closePath();//结束
        if(color=="#000000")
        {
          color = "#ff0000";
          //黑棋
          chessData[i][j] = 2;
          
          
        }else{
          color = "#000000";
          //红棋
          chessData[i][j] = 1;
          
        }
        
      }
      //重复调用 在做坦克大战之类游戏  需要使用。。。。。。。
//      window.setInterval(函数,时间);
    
    

      //游戏是否结束
//      function isGameWin()
      
      //如果是人机对战版,则需要下棋的AI 如果不是人机对战 则下完棋后,提醒对方下棋
//      function gameAI() 
      
      //做鼠标监听  游戏逻辑
      document.onmousedown= function(e)
      {
        window.onclick = function (){
        
        //获取下棋的坐标
        i = Math.round((e.x-10)/25);
        j = Math.round((e.y-10)/25);//边界不能下
        //判断该位置x,y是否可以下棋
        x = i*25+10;
        y = j*25+10;
        
        //判断该位置ij是否有棋子
        if(chessData[i][j]==0)
        {
          //下棋
          addChess(x,y);
        
          
        }else{
          alert("不好意思!你来晚了,已经被对方捷足先登了");
        }
        
        
        }
      }
      
      
    </script>
    
  </body>
</html>

代码不全,会陆续加上。

以上这篇javascript 初学教程及五子棋小程序的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
javascript计算对象长度的方法
Oct 25 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 #Javascript
JS全角与半角转化实例(分享)
Jul 04 #Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 #Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 #Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
You might like
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php中in_array函数用法分析
2014/11/15 PHP
php中的观察者模式简单实例
2015/01/20 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
Ibatis的核心配置文件都有什么
2014/09/08 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
医院辞职信范文
2014/01/17 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Python制作动态字符画的源码
2021/08/04 Python