<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>猜数</title>

 </head>

 <body>

 <canvas id="box" width="500" height="300"></canvas>

 <form>

 <input type="text" id="guessValue" placeholder="port Canvas Image">

 <button id="createImageData">猜猜看?!</button>

 </form>

 <script>

 var guesses = 0;

 var message = "Guess the letter from a(lower) to Z(higher)";

 var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

 var today = new Date();

 var letterToGuess = '';

 var higherOrLower='';

 var letterGuessed;

 var gameOver = false;

 function initGame() {

     var letterIndex = Math.floor(Math.random() * letters.length);

     letterToGuess = letters[letterIndex];

     guess = 0;

     letterGuessed = [];

     gameOver = false;

     window.addEventListener("keydown", eventKeyPressed, true);

     drawScreen();

     var formElement = document.querySelector("#createImageData");

     formElement.addEventListener("click",createImageDataPressed,false);

 }

 function eventKeyPressed(e){

     if(!gameOver) {

         var letterPressed = String.fromCharCode(e.keyCode);

         letterPressed = letterPressed.toLowerCase();

         guesses++;

         letterGuessed.push(letterPressed);

         if (letterPressed == letterToGuess) {

             gameOver = true;

         } else {

             letterIndex = letters.indexOf(letterToGuess);

             guessIndex = letters.indexOf(letterPressed);

             console.log(guessIndex);

             if (guessIndex < 0) {

                 higherOrLower = "That is not a letter!"

             } else if (guessIndex > letterIndex) {

                 higherOrLower = "Lower";

             } else {

                 higherOrLower = "higher";

             }

         }

          drawScreen();

     }

 }

 var canvas = document.querySelector("#box");

 var ctx = canvas.getContext("2d");

 function drawScreen(){

     //背景

     ctx.fillStyle = "#ffffaa";

     ctx.fillRect(0,0,500,300);

     //边框

     ctx.strokeStyle = "#000000";

     ctx.strokeRect(5,5,490,290);

     ctx.textBaseline = "top";

     //日期

     ctx.fillStyle = "#000000";

     ctx.font = "10px Sans-Serif";

     ctx.fillText(today,150,10);

     //消息

     ctx.fillStyle = "#ff0000";

     ctx.font = "14px Sans-serif";

     ctx.fillText(message,125,30);

     //猜的次数

     ctx.fillStyle = "#109910";

     ctx.font = "16px Sans-serif";

     ctx.fillText("guess: "+guesses+"次！",215,50);

     //显示higher或lower

     ctx.fillStyle = "#000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Higher or Lower: "+higherOrLower,150,125);

     //猜过的字母

     ctx.fillStyle = "#ff0000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260);

     if(gameOver){

         ctx.fillStyle = "#ff0000";

         ctx.font = "40px _sans-serif";

         ctx.fillText("You got it!",150,180);

     }

 }

 function createImageDataPressed(e){

 window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0");

 }

 initGame();

 </script>

 </body>

 </html>

canvas猜数游戏的更多相关文章

  1. 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)

    1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...

  2. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  3. （一）Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  4. 猜数游戏-flag的运用

    package my;import java.util.Scanner;public class MyJava {        public static void main(String[] ar ...

  5. Java课程设计——猜数游戏（201521123111 陈伟泽）

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. JAVA课程设计 猜数游戏 团队

    团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法，傻逼题，猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  9. VBS猜数游戏

    VBS 猜数游戏 2018-11-09  21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...

随机推荐

  1. [Erlang35]Erlang18的time

    在Erlang 18中, 我们还是可以使用erlang:now/0 但也已经 deprecated啦,大量使用可能引发瓶颈. The default time warp mode has the sa ...

  2. nginx停止

  3. HtmlHelper扩展之mvchtmlstring

    后台: using System;using System.Web;using System.Web.Mvc; namespace EwayFramework.Utils.Token{ public ...

  4. ASP.NET 生成缩略图片类分享

    /// <summary> /// 生成图片缩略图 指定文件路径生成 /// </summary> public static void SaveImage(String fu ...

  5. C# 中多态和重载的区别

    一.多态性意味着有多重形式. 在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". using System; using System.Collections.Gene ...

  6. Sql语法高级应用之五：使用存储过程实现对明细多层次统计

    前言 前面章节我们讲到了存储过程的基础用法,本章则将一个在项目中实际应用的场景. 在项目中经常会存在这样的需求,例如需要对明细列表进行按组.按级别.按人等进行统计,如果在附带列表的查询条件,又如何实现 ...

  7. Dapper.Contrib.Extensions问题

    Dapper.Contrib.Extensions问题 Dapper.Extension.1.0.0.1\lib\net45\Dapper.Extension.dll Dapper.Contrib.1 ...

  8. Android Activity 无法获取组件尺寸

    Activity 创建的时候,可能在 onCreate 的时刻,窗口 Window 对象的创建还未完成. 那么最合适的时机是什么呢?答案是:onWindowFocusChanged.这个方法在 Act ...

  9. “全栈2019”Java异常第四章：catch代码块作用域详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  10. “全栈2019”Java异常第三章：try代码块作用域详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...