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 相关文章推荐
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript严格模式详解
Nov 18 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
Angular 路由route实例代码
Jul 12 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 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实现将GB编码转换为UTF8
2006/11/25 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
Smarty安装配置方法
2008/04/10 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
thinkPHP查询方式小结
2016/01/09 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
JavaScript实现简单评论功能
2017/08/17 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
django2.0扩展用户字段示例
2019/02/13 Python
python如何实现异步调用函数执行
2019/07/08 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
一个C/C++编程面试题
2013/11/10 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
治理商业贿赂工作总结
2015/08/10 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js